<template>
    <div>
      <h2 style="text-align: center;">通知信息列表</h2>
      <el-row :gutter="20">
  <el-col :span="18" :offset="4" style="display: flex; flex-direction: column;">
    <!-- 添加/批量删除按钮 -->
    <div>
      
      <el-button @click="batchDeleteNotice" type="danger" size="small">批量删除通知</el-button>
    </div>
    <template>
  <div>
    <el-card class="box-card" style="width: 100%; max-width: 1600px;">
      <div class="el-table__header" slot="header">
        通知列表
      </div>
      <el-table
        :data="noticeList"
        style="width: 100%; max-width: 1200px; margin-top: 20px;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          prop="createdTime"
          label="通知时间"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="message"
          label="通知内容"
          width="450"
        >
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
    <el-row style="margin-top: 10px; text-align: center;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        prev-text="上一页"
        next-text="下一页"
        @next-click="getNoticePage(pageNo + 1, pageSize)"
        @prev-click="getNoticePage(pageNo - 1, pageSize)"
        @current-change="handleCurrentChange"
        v-if="isPaginationVisable"
      ></el-pagination>
    </el-row>
  </el-col>
</el-row>
    </div>
</template>
  <script>
  import axios from 'axios';
  import { mapGetters } from 'vuex';
    export default {
      computed: {
    ...mapGetters([
      'name',
      'userId'
    ])
    },
    created() {
    // 在组件创建时，将 userId 的值赋给 data 中的 localUserId
    this.localUserId = this.userId
  },
      data() {
        return {
          localUserId:'',
          noticeList:[],
          pageNo:1,
          pageSize:8,
          total:0,
          notificationIds:[],
          dialogTableVisible:false,
          dialogTableVisibleSelect:false,
          isPaginationVisable:true,
          notice:{
            notificationId:undefined,
            orderId:undefined,
            userId:undefined,
            flightId:undefined,
            message:'',
            createdTime:'',
          },
        }
      },
      mounted(){
        this.getNoticePage(this.pageNo,this.pageSize);
      },
      methods:{
       
        /**
         * 多选事件处理
         */
        handleSelectionChange(val){
          this.notificationIds=[],
          val.forEach(element => {
            this.notificationIds.push(element.notificationId)
            console.log(this.notificationIds)
          });
          
        },
        /**
         * 批量删除
         */
        batchDeleteNotice(){
          if(this.notificationIds&&this.notificationIds.length===0){
            this.$message({
            type: 'error',
            message: '请选择要删除的数据!'
          })
          }else{
          this.$confirm('是否批量删除', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
          //确定删除
          axios.post("http://localhost:8082/notice/deleteNotice",JSON.stringify(this.notificationIds),{
            headers:{
              'Content-Type':'application/json'
            }
          }).then(resp=>{
            if(resp.data.code===0){
              this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.getNoticePage(this.pageNo,this.pageSize)
            }else{
              this.$message({
              type: 'error',
              message: resp.data.message
          })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '已取消删除'
          });          
        });}
        },
        /**
         * 处理当前页
         */
        handleCurrentChange(current){
          this.pageNo=current
          this.getNoticePage(this.pageNo,this.pageSize)
        },
        /**
         * 分页获取乘客信息的函数
         */
        getNoticePage(pageNo,pageSize){
          this.pageNo=pageNo
          this.pageSize=pageSize
          axios.get("http://localhost:8082/notice/getNoticePage",{
            params:{
              pageNo:this.pageNo,
              pageSize:this.pageSize,
              userId:this.localUserId
            }
          }).then(resp=>{
            console.log("------->",resp)
            this.noticeList=resp.data.data.page
            this.total=resp.data.data.total
          })
        },
       
      }
    }
  </script>
  <style>
 .box-card {
    margin-bottom: 20px;
    border: solid 1px #ebeef5;
    border-radius: 4px;
    padding: 20px;
    background: #fff;
  }
  .el-table__header {
    background: #f0f2f5;
  }

</style>